﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Measurement.HubPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ac="using:WinRTXamlToolkit.Controls"
    xmlns:local="using:Measurement"
    xmlns:data="using:Measurement.Data"
    xmlns:common="using:Measurement.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
      
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>        
        
        <Style x:Key="AccordionButtonStyle"
               TargetType="CheckBox">
            <Setter Property="Background" Value="{StaticResource ToggleButtonBackgroundThemeBrush}" />
            <Setter Property="Foreground" Value="{StaticResource ToggleButtonForegroundThemeBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource ToggleButtonBorderThemeBrush}" />
            <Setter Property="BorderThickness" Value="{StaticResource ToggleButtonBorderThemeThickness}" />
            <Setter Property="Padding" Value="12,4,12,5" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="CheckBox">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup
                                    x:Name="CommonStates">
                                    <VisualState
                                        x:Name="Normal" />
                                    <VisualState
                                        x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonPointerOverBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonPressedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonPressedForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonDisabledBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonDisabledForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="CheckedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedPointerOverBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedPointerOverBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="CheckedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedPressedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedPressedBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedPressedForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="CheckedDisabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedDisabledBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonDisabledBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonCheckedDisabledForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Indeterminate" />
                                    <VisualState
                                        x:Name="IndeterminatePointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonPointerOverBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="IndeterminatePressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonPressedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonPressedForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="IndeterminateDisabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonDisabledBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Foreground"
                                                Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource ToggleButtonDisabledForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup
                                    x:Name="FocusStates">
                                    <VisualState
                                        x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Duration="0"
                                                To="1"
                                                Storyboard.TargetProperty="Opacity"
                                                Storyboard.TargetName="FocusVisualWhite" />
                                            <DoubleAnimation
                                                Duration="0"
                                                To="1"
                                                Storyboard.TargetProperty="Opacity"
                                                Storyboard.TargetName="FocusVisualBlack" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Unfocused" />
                                    <VisualState
                                        x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border
                                x:Name="Border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                Margin="3">
                                <ContentPresenter
                                    x:Name="ContentPresenter"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    ContentTransitions="{TemplateBinding ContentTransitions}"
                                    Content="{TemplateBinding Content}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    Margin="{TemplateBinding Padding}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Border>
                            <Rectangle
                                x:Name="FocusVisualWhite"
                                IsHitTestVisible="False"
                                Opacity="0"
                                StrokeDashOffset="1.5"
                                StrokeEndLineCap="Square"
                                Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                                StrokeDashArray="1,1" />
                            <Rectangle
                                x:Name="FocusVisualBlack"
                                IsHitTestVisible="False"
                                Opacity="0"
                                StrokeDashOffset="0.5"
                                StrokeEndLineCap="Square"
                                Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                                StrokeDashArray="1,1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>
    
   

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Margin="0,2,0,-2">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppLogo" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>108,137,40,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppLogo" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppLogo" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainScroll" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewerStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>20,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="stackPanel">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Orientation>Vertical</Orientation>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel1">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>0,30,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel2">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>0,30,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel3">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>0,30,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel4">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>0,30,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>                        
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="MainScroll">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>0,130,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid Grid.RowSpan="2">
            <Image Source="/Assets/Background.jpg" Stretch="Fill">
               
            </Image>
        </Grid>
        
        <SemanticZoom Grid.RowSpan="2" x:Name="SemanticZoom">
            <SemanticZoom.ZoomedInView>                
                <common:SemanticStackPanel>
                    <ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}" x:Name="MainScroll">
                        <StackPanel x:Name="stackPanel" Orientation="Horizontal" Margin="120,137,40,0">
                            <StackPanel>
                                <TextBlock TextWrapping="Wrap" Text="Mass and Weight" Foreground="Black" FontFamily="Segoe UI" FontSize="32" FontWeight="Light"/>
                                <TextBox Tag="{StaticResource MassnWeight}" Background="White" Margin="0 10" BorderBrush="{x:Null}" BorderThickness="0" TextAlignment="Right" Text="22.03" Foreground="#FF427FAB" FontSize="28" Padding="10,0" Style="{StaticResource InputTextBoxStyle}" Height="40"/>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10" x:Name="KgCombo" >
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10">
                                    <ComboBoxItem Content="milligram (mg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <TextBox TextWrapping="Wrap" Text="22030000 " Margin="0,10" Height="40" FontSize="28" Padding="10,0" TextAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" Foreground="#FF427FAB"/>
                                <Button Content="Convert" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="150" Height="40" Background="#FF01599B" Foreground="White" Style="{StaticResource BtnStyle}" Margin="0,10"/>

                            </StackPanel>
                            <StackPanel x:Name="stackPanel1" Margin="150,0,0,0">
                                <TextBlock TextWrapping="Wrap" Text="Distance and Length" Foreground="Black" FontFamily="Segoe UI" FontSize="32" FontWeight="Light"/>

                                <TextBox Tag="{StaticResource DistancenLength}" Background="White" Margin="0 10" BorderBrush="{x:Null}" BorderThickness="0" TextAlignment="Right" Text="55.25" Foreground="#FF427FAB" FontSize="28" Padding="10,0" Style="{StaticResource InputTextBoxStyle}" Height="40"/>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10" x:Name="KgCombo1">
                                    <ComboBoxItem Content="angstrom" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10">
                                    <ComboBoxItem Content="inch (in)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <TextBox TextWrapping="Wrap" Margin="0,10" Height="40" FontSize="28" Padding="10,0" TextAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" Foreground="#FF427FAB"/>
                                <Button Content="Convert" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="150" Height="40" Background="#FF01599B" Foreground="White" Style="{StaticResource BtnStyle}" Margin="0,10"/>

                            </StackPanel>
                            <StackPanel x:Name="stackPanel2" Margin="150,0,0,0">
                                <TextBlock TextWrapping="Wrap" Text="Capacity and Volume" Foreground="Black" FontFamily="Segoe UI" FontSize="32" FontWeight="Light"/>

                                <TextBox Tag="{StaticResource Capacity}" Background="White" Margin="0 10" BorderBrush="{x:Null}" BorderThickness="0" TextAlignment="Right" Text="08.00" Foreground="#FF427FAB" FontSize="28" Padding="10,0" Style="{StaticResource InputTextBoxStyle}" Height="40"/>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10" x:Name="KgCombo2">
                                    <ComboBoxItem Content="centiliter (cl)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10">
                                    <ComboBoxItem Content="cubic inch (in3, cu in)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <TextBox TextWrapping="Wrap" Margin="0,10" Height="40" FontSize="28" Padding="10,0" TextAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" Foreground="#FF427FAB"/>
                                <Button Content="Convert" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="150" Height="40" Background="#FF01599B" Foreground="White" Style="{StaticResource BtnStyle}" Margin="0,10"/>

                            </StackPanel>
                            <StackPanel x:Name="stackPanel3" Margin="150,0,0,0">
                                <TextBlock TextWrapping="Wrap" Text="Area" Foreground="Black" FontFamily="Segoe UI" FontSize="32" FontWeight="Light"/>

                                <TextBox Tag="{StaticResource Area}" Background="White" Margin="0 10" BorderBrush="{x:Null}" BorderThickness="0" TextAlignment="Right" Text="08.00" Foreground="#FF427FAB" FontSize="28" Padding="10,0" Style="{StaticResource InputTextBoxStyle}" Height="40"/>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10" x:Name="KgCombo3">
                                    <ComboBoxItem Content="acre" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10">
                                    <ComboBoxItem Content="square meter (m2)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <TextBox TextWrapping="Wrap" Margin="0,10" Height="40" FontSize="28" Padding="10,0" TextAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" Foreground="#FF427FAB"/>
                                <Button Content="Convert" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="150" Height="40" Background="#FF01599B" Foreground="White" Style="{StaticResource BtnStyle}" Margin="0,10"/>

                            </StackPanel>
                            <StackPanel x:Name="stackPanel4" Margin="150,0,0,0">
                                <TextBlock TextWrapping="Wrap" Text="Temperature" Foreground="Black" FontFamily="Segoe UI" FontSize="32" FontWeight="Light"/>

                                <TextBox Tag="{StaticResource Temperature}" Background="White" Margin="0 10" BorderBrush="{x:Null}" BorderThickness="0" TextAlignment="Right" Text="08.00" Foreground="#FF427FAB" FontSize="28" Padding="10,0" Style="{StaticResource InputTextBoxStyle}" Height="40"/>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10" x:Name="KgCombo4">
                                    <ComboBoxItem Content="Celsius" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <ComboBox Style="{StaticResource OptionComboBoxStyle}" SelectedIndex="0" Margin="0,10">
                                    <ComboBoxItem Content="Fahrenheit" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>

                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="kilogram (kg)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="atomic mass unit (amu)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="carat (metric)" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="cental" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                    <ComboBoxItem Content="centigram" Margin="0,3,15,3" Background="#FFfa3048" Foreground="White"/>
                                </ComboBox>
                                <TextBox TextWrapping="Wrap" Margin="0,10" Height="40" FontSize="28" Padding="10,0" TextAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" Foreground="#FF427FAB"/>
                                <Button Content="Convert" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="150" Height="40" Background="#FF01599B" Foreground="White" Style="{StaticResource BtnStyle}" Margin="0,10"/>

                            </StackPanel>



                        </StackPanel>
                    </ScrollViewer>
                </common:SemanticStackPanel>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.RowSpan="2"
            Padding="105,137,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource MeasurementTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"            
            IsItemClickEnabled="True">

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid/>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

       
        
        


        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Text="Your app slogan goes here"/>
            <Image Grid.Column="1" Height="95" Source="/Assets/AppLogo.png" HorizontalAlignment="Right" x:Name="AppLogo"/>
        </Grid>

    </Grid>
</common:LayoutAwarePage>
